<div *ngIf="!action.complete">
  <!--  id="userNum" -->
  <input
    *ngIf="!action.onlyOne; else one"
    [(ngModel)]="action.numWantedUi"
    (change)="onNumChange()"
    type="number"
    placeholder="1"
    step="1"
    min="1"
    size="3"
  />
  <ng-template #one>1</ng-template>
  <span>会消耗: </span>
  <app-price-line
    *ngFor="let price of action.multiPrice.prices; trackBy: getPriceId"
    [unit]="price.spendable"
    [canBuy]="price.canBuyMulti"
    [price]="price.multiCost"
  ></app-price-line>
</div>

<div *ngIf="!action.complete" class="btn-group">
  <button
    *ngIf="action.isCapped() || (!action.canBuy && !canSkip)"
    class="btn btn-sm w-100"
    disabled
  >
    {{ this.action.alertMessage ? "不能拆除" : "不能购买" }}

    <span *ngIf="action.showTime && !action.isCapped()">
      将在 {{ action.availableIn | endIn }} 后可用
    </span>
    <span *ngIf="action.isCapped()">
      达到上限。
    </span>
  </button>
  <button
    *ngIf="
      !action.isCapped() &&
      !action.canBuy &&
      action.skippable &&
      action.showTime &&
      canSkip
    "
    class="btn btn-primary btn-sm w-100"
    (click)="skip()"
  >
    不能购买。 跳过 {{ minuteSkip }} 分钟
  </button>

  <button
    *ngIf="action.canBuy"
    class="btn btn-sm w-100"
    (click)="buyOrModal(action.numWanted)"
    [disabled]="!action.canBuyWanted"
  >
    {{ this.action.alertMessage ? "拆除" : "购买" }}
    <app-formatted-quantity
      *ngIf="!action.isLimited || action.limit.gte(2)"
      [quantity]="action.numWanted"
      [integer]="true"
      [monospace]="false"
    ></app-formatted-quantity>
  </button>
  <button
    *ngIf="action.maxBuy.gt(3)"
    class="btn btn-sm w-100"
    (click)="buyOrModal(action.maxBuy.div(2).floor())"
  >
    {{ this.action.alertMessage ? "拆除" : "购买" }}
    <app-formatted-quantity
      [quantity]="getHalfBuy()"
      [integer]="true"
      [monospace]="false"
    ></app-formatted-quantity>
  </button>
  <button
    *ngIf="action.maxBuy.gte(2)"
    class="btn btn-sm w-100"
    (click)="buyOrModal(action.maxBuy)"
  >
    {{ this.action.alertMessage ? "拆除" : "购买" }}
    <app-formatted-quantity
      [quantity]="getMaxBuy()"
      [integer]="true"
      [monospace]="false"
    ></app-formatted-quantity>
  </button>
</div>

<clr-modal [(clrModalOpen)]="alertModal">
  <h3 class="modal-title">
    {{ action.name }}
    <app-formatted-quantity
      [quantity]="alertQuantity"
      [integer]="true"
    ></app-formatted-quantity>
  </h3>
  <div class="modal-body">
    <p>{{ action.alertMessage }}</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="alertModal = false">
      Cancel
    </button>
    <button type="button" class="btn btn-danger" (click)="buy(alertQuantity)">
      Ok
    </button>
  </div>
</clr-modal>
